<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./web.css">
    <title>HTML 文档结构</title>
</head>

<body>
    <div class="group">
        <!-- 输入框 -->
        <input class="todovalue" type="text" name="todoValueName" id="todoValueID" placeholder="请输入TODO内容" onkeydown="valueChange(event)">
        <!-- 遍历数据 -->
        <div id="todoList">
            <div class="item">
                <input class="item-chk" type="checkbox" >
                <div class="item-sp">吃饭0</div>
                <input id="item-del-0"  class="item-del" type="button" value="删除"
                 onclick="handleDelClick(0)"> 
            </div>

            <div class="item">
                <input class="item-chk" type="checkbox">
                <div class="item-sp">吃饭1</div>
                <input id="item-del-1" type="button" class="item-del" value="删除" 
                onclick="handleDelClick(1)">
            </div>

            <div class="item">
                <input class="item-chk" type="checkbox">
                <div class="item-sp">吃饭2</div>
                <input id="item-del-2" type="button" class="item-del" value="删除" 
                onclick="handleDelClick(2)">
            </div>
        </div>
        <!-- 操作的footer -->
    </div>
</body>
<script lang="javascript">
    var index = 0;
    function init() {
        document.getElementById("button3").onclick = handleClick;
    }
   
    function valueChange(e) {
        console.log(e);
        if (event.keyCode == 13) {
            handleClick();
        };
    }
    
     function handleClick() {
        var temp = document.getElementsByName("todoValueName")[0].value;
        alert("我被按了" + temp);
        var div = document.createElement("div");
        div.innerText = temp;
        document.getElementById("todoList").append(div);
    }
    function handleDelClick(index){
        var arr=document.getElementById("todoList");
        alert(arr);
        document.getElementById("item"+index).remove();
    }
    init();

</script>
 body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.group {
    border: 1px solid blue;
    padding: 10px;
    border-radius: 4px;
}

.item {
  
    
    margin: 3px;
    padding: 3px;
    border-radius: 4px;
    display: flex;
    align-items: center;
}

.item:hover {
    background-color: aqua;

    transform: scale(1.2);
   
}

.item-sp {
    flex-grow: 1;
}

.item-del {
    background-color: red;
    border: 0px;
    color: aliceblue;
    opacity: 0;
}

.item:hover .item-del {
    opacity: 1;
}

.todovalue {
    border: 2px solid #333333;
    padding: 6px;
    outline: none;
}

.todovalue:focus {
    box-shadow: 0px 0px 9px #4086cd;
    border: 2px solid #4086cd;
    outline: none;
}
</style>
</html>